import { useEffect } from "react";
import { Button, Checkbox, Form, Input } from "antd";
import { init } from "./init";
import "./index.less";
import { login } from "@/api/employee";
import { useDispatch } from "react-redux";
import { setEmployee } from "@/store";
import { useNavigate, useLocation, NavLink } from "react-router-dom";
import { LoginForm } from "@/types/login";
function LoginPage() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    init();
  }, []);
  const onFinish = async (values: LoginForm) => {
    const loginRes = await login(values);
    if (loginRes) {
      dispatch(setEmployee(loginRes));
      let path = new URLSearchParams(location.search).get("path");
      if (!path) {
        path = "/";
      }
      navigate(path);
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="login-box">
      <Form
        className="login-form"
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 21 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <h1 className="login-form-title">nest-backend</h1>
        <Form.Item
          label="用户名"
          name="username"
          validateStatus="warning"
          rules={[{ required: true, message: "请输入用户名!" }]}
        >
          <Input placeholder="用户名：admin" />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input.Password placeholder="密码：123456" />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 3, span: 21 }}>
          <div className="text-right">
            <NavLink to="/retrievePassword">
              <Button type="primary" ghost>
                忘记密码
              </Button>
            </NavLink>
          </div>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 3, span: 21 }}>
          <Button block type="primary" htmlType="submit">
            登陆
          </Button>
        </Form.Item>
      </Form>
      <canvas id="canvas"></canvas>
    </div>
  );
}
export default LoginPage;
